import Vue from 'vue'
import Router from 'vue-router'

// 安装语法!!
console.log('router======', Router)
Vue.use(Router)

/* Layout */
// 布局架子
import Layout from '@/layout'

// 导入语法
// import Vue from 'vue'  立即导入
// const Vue = import('vue')  动态导入 => 只有用到我了 我才导入 => 路由懒加载(按需加载)
// 导入是有缓存的,下次再被引入import时, 直接走缓存

// 默认导入
// 引入多个模块的规则
import approvalsRouter from './modules/approvals'
import departmentsRouter from './modules/departments'
import employeesRouter from './modules/employees'
import permissionRouter from './modules/permission'
import attendancesRouter from './modules/attendances'
import salarysRouter from './modules/salarys'
import settingRouter from './modules/setting'
import socialRouter from './modules/social'

// 动态路由表 => 动态路由(需要权限才可以访问的) 我们这里准备一个数组存放
export const asyncRoutes = [
  departmentsRouter,
  settingRouter,
  employeesRouter,
  permissionRouter,
  approvalsRouter,
  attendancesRouter,
  salarysRouter,
  socialRouter
]

// 这种方式会组件全部加载 => 首屏加载很慢
// import Login from '@/views/Login'
// 懒加载方式
// const Login = () => import('@/views/Login')

// const routes = [
//   { path: '/login', component: Login }
// ]

// const router = new Router({
//   routes: routes
// })

/**
 * constantRoutes
 * a base page that does not have permission requirements
 * all roles can be accessed
 */

// constant 常量/不变 有些路由是不变的 => 静态路由(不用做权限)
export const constantRoutes = [
  // 一级路由 登录页
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },
  // 一级路由 404 报错页
  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },
  // 一级路由  首页
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [
      // 首页的二级路由
      {
        path: 'dashboard',
        name: 'dashboard',
        component: () => import('@/views/dashboard/index'),
        meta: { title: '首页', icon: 'dashboard' }
      }
    ]
  },

  {
    path: '/import',
    component: Layout,
    hidden: true,
    children: [
      {
        path: '',
        name: 'import',
        component: () => import('@/views/import')
      }
    ]
  }

  // 404 必须放最后 !!! (规范)
  // 匹配所有路由  通常配合404一起用
  // 此时临时注释, 将来一定会添加到路由规则的最后!!!
  // { path: '*', redirect: '/404', hidden: true }

  // ..... addRoutes
]

// const router = new Router({
//   routes: []
// })

const createRouter = () => new Router({
  mode: 'history', // 需要后端支持
  // 滚动行为: 只要切换路由了, 默认滚动条回到顶部
  scrollBehavior: () => {
    return { y: 0 }
  },
  // 我们作为开发者, 一开始是不考虑权限管理 应该是默认看到所有路由
  // 动态路由 静态路由的 临时合并(以后会做权限)
  // v-for   this.$router.options.routes
  // constantRoutes 先放上面, 首页放上面(有效果但是不规范!!!)  => 404一定会丢到最下面
  routes: [
    ...constantRoutes
    // ...asyncRoutes
  ]
})

const router = createRouter()

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
// 重置路由(了解) => new了一个新的路由实例, 只要新的路由实例的匹配规则, 替换给老的路由规则
export function resetRouter() {
  const newRouter = createRouter() // 重新new 路由实例
  router.matcher = newRouter.matcher // 路由匹配函数
}

export default router
